<template>
  <div style="text-align: left;">
    <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
      <el-menu-item index="1">关注老师</el-menu-item>
    </el-menu>
    <el-row v-for="(item,index) in aaa" :key="index"
            style="border-bottom: #cccccc solid 1px;padding-top: 10px;padding-bottom: 10px" type="flex" justify="start">
      <el-col :span="20" class="course_content">
        <div style="display: inline-block; float: left; margin: 5px;">
          <img style="width: 140px;height: 100px" :src="item.headImgUrl" class="avatar">
        </div>
        <div style="display: inline-block; float: left">
          <div style="margin-left: 10px;">
            <router-link :to="{path:'/teacher1',query:{tid:item.lecturerId}}">
              <p class="course_name">{{ item.lecturerUserName }}</p>
            </router-link>
          </div>
        </div>
        <div style="display: inline-block; float: left">
          <div style="margin-left: 10px;">
            <p class="course_introduce">{{ item.introduce }}</p>
          </div>
        </div>
      </el-col>
      <el-col :span="4">
        <div class="bg-purple">
          <el-link :underline="false" @click="handleCancel(item)">取消关注</el-link>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  import qs from 'qs'
  export default {
    name: "attention",
    data() {
      return {
        aaa: [],
        bbb:{
          id:'',
          userId:'',
          teacherId:'',
        },
        activeIndex: '1',
        user:sessionStorage.getItem("uid"),

      }
    },
    created(){
      this.findAll();
    },
    methods: {
      findAll(){
        this.$axios2.post("student/stu/attention/finduserLecAttById",qs.stringify({userId:this.user})).then(r=>{
          //alert(JSON.stringify(r.data));
          this.aaa=r.data;
        })
      },
      handleSelect(key, keyPath) {
        console.log(key, keyPath);
      },
      handleCancel(val) {
        this.bbb.userId=sessionStorage.getItem("uid");
        this.bbb.teacherId=val.lecturerId;
        this.$confirm('您确定要取关为师吗？再考虑考虑？', {
          confirmButtonText: '狠心取关',
          cancelButtonText: '再想想',
          type: 'warning'
        }).then(() => {
          this.$axios2.post("student/stu/attention/delByUserAndLec", qs.stringify(this.bbb)).then(r => {
            if (r.data){
              this.$message({
                type: 'success',
                message: '取关成功！再见了，同学!'
              });
            } else {
              this.$message.error('系统繁忙，请稍后重试');
            }
            this.findAll();
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '明智的决定'
          });
        });

      },
    }
  }
</script>

<style scoped>
  .avatar {
    width: 180px;
    height: 100px;
    display: block;
    margin-left: 10px;
  }

  .course_content p {
    height: 40px;
    margin-top: 5px;
    margin-bottom: 5px;
    line-height: 20px;
  }

  .course_name{
    padding: 30px;
    font-size: 20px;
    color: gray;
  }

  .course_introduce {
    font-size: 16px;
    left: 205px;
    color: #999;
  }
  .bg-purple{
    padding: 30px;
  }

  .el-row--flex {
    margin-bottom: 0;
  }
</style>
